import {PageContainer} from '@ant-design/pro-components';
import '@umijs/max';
import React, {useEffect} from 'react';
import ReactECharts from 'echarts-for-react';
import {message} from "antd";
import {listInterfaceInfoInvokeAnalysisUsingGet} from "@/services/feiapi/analysisController";


/**
 * component
 * @constructor
 */
const AdminInterfaceInfoAnalysis: React.FC = () => {

  const [data,setData] = React.useState<API.InterfaceInfoVO[]>([])
  const [loading,setLoading] =React.useState(true)

  const getInitData = async () => {
    setLoading(true)
    try {
      const res = await listInterfaceInfoInvokeAnalysisUsingGet({
        limit:5
      })
      if (res.data){
        setData(res.data)
      }
    }catch (e:any){
      message.error(e.message)
    }
    setLoading(false)
  }

  const echartData = data.map(item => {
    return {
      value: item.totalCount,
      name: item.name
    }
  })

  useEffect(()=> {
    getInitData()
  },[])

  const option = {
    title: {
      text: '接口调用top5',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '接口调用名称',
        type: 'pie',
        radius: '50%',
        data: echartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };



  return (
    <PageContainer title={"接口调用统计分析"}>
      <ReactECharts showLoading={loading} option={option} />
    </PageContainer>
  );
};
export default AdminInterfaceInfoAnalysis;
